<template>
  <div id="picture-list">
    <ShareModal ref="shareModalRef" :link="shareLink" />
    <!-- 图片列表  -->
    <a-list
      :data-source="dataList"
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item style="padding: 0">
          <!-- 单张图片-->
          <a-card hoverable @click="doClickPicture(picture)">
            <template #cover>
              <img
                :alt="picture.name"
                :src="picture.thumbnailUrl ?? picture.url"
                style="height: 180px; object-fit: cover"
                loading="lazy"
              />
            </template>
            <!-- 图片标题和标签 -->
            <a-card-meta :title="picture.name">
              <template #description>
                <a-flex>
                  <!-- 分类展示 -->
                  <a-tag color="green">
                    {{ picture.category ?? '默认' }}
                  </a-tag>
                  <!-- 标签展示 -->
                  <a-tag v-for="tag in picture.tags" :key="tag">
                    {{ tag }}
                  </a-tag>
                </a-flex>
              </template>
            </a-card-meta>
            <template #actions v-if="showOp">
              <!-- 分享 -->
                <ShareAltOutlined @click="e => doShare(picture, e)" />
              <!-- 搜索 -->
                <SearchOutlined @click="e => doSearch(picture, e)" />
              <!-- 编辑-->
                <EditOutlined v-if="canEdit" @click="e => doEdit(picture, e)" />
              <!-- 删除-->
                <DeleteOutlined v-if="canDelete" @click="e => doDelete(picture, e)" />
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { EditOutlined, DeleteOutlined, SearchOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
import {deletePictureUsingPost} from "@/api/pictureController";
import {message} from "ant-design-vue";
import ShareModal from "@/components/ShareModal.vue";
import {ref} from "vue";

const router = useRouter()

interface Props {
  dataList?: API.PictureVO[]
  loading?: boolean
  showOp?: boolean
  onReload?: () => void
  canEdit?: boolean
  canDelete?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showOp: false,
  canEdit: false,
  canDelete: false,
})

/**
 * 点击图片事件，跳转到图片详情页
 */
const doClickPicture = (picture: API.PictureVO) => {
  // 跳转到图片id对应的详情页，
  router.push({
    path: `/picture/${picture.id}`,
  })
}

/**
 * 编辑和删除逻辑
 */
// 以图搜图
const doSearch =(picture: API.PictureVO, e: Event) => {
  //阻止组件冒泡传递
  e.stopPropagation();
  window.open(`/search_picture?pictureId=${picture.id}`)
}
//编辑
const doEdit = (picture: API.PictureVO, e: Event) => {
  //阻止组件冒泡传递
  e.stopPropagation();
  router.push({
    path: '/add_picture',
    query: {
      id: picture.id,
      spaceId: picture.spaceId,
    }
  })
}
//删除图片
const doDelete = async (picture: API.PictureVO, e: Event) => {
  //阻止组件冒泡传递
  e.stopPropagation();
  const id = picture.id
  if (!id) {
    return;
  }
  const res = await deletePictureUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除图片成功')
    //删除成功外层刷新，立即显示效果
    props?.onReload?.();
  } else {
    message.error('删除图片失败,我也不知道为什么')
    console.log(res.data.code)
    console.log(res.data.message)
  }
}

/**
 * 分享图片弹窗
 */
// 分享弹窗引用
const shareModalRef = ref();
// 分享连接
const shareLink = ref<string>();
// 分享
const doShare = (picture: API.PictureVO, e: Event) => {
  //阻止组件冒泡传递
  e.stopPropagation();
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.id}`
  if(shareModalRef.value) {
    shareModalRef.value.openModal()
  }
}

</script>

<style scoped>

</style>
